<template>
  <button @click="flag = !flag" style="margin-bottom: 20px">父子通讯和兄弟通讯案例切换</button>
  <Father v-if="flag"></Father>
  <BrotherTest v-else />
</template>

<script setup lang="ts">
/**
 * 组件通讯方法
 *      父传子：props
 *      子传父：自定义事件emit 、 defineExpose
 *      祖传后：依赖注入Provide/Inject
 *      兄传弟：借助父组件传参（自定义事件和props）、Event Bus事件总线、mitt
 */
import Father from './Father.vue';
import { provide, ref } from 'vue';
const flag = ref<boolean>(true);
// 依赖注入Provide/Inject
const color = ref('#4c7b42');
provide('fatherColor', color);

// 兄弟组件传参
import BrotherTest from './brother/BrotherTest.vue';
</script>

<style lang="scss" scoped></style>
